﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
	<title>WEBOOK</title>
	{% load staticfiles %}
	<style type="text/css">
	body,input{
		margin: 0;
		padding: 0;
		background: #b3d9d9;
	}
	input{
		display: inline-block;
		background: #fff;
	}
	.xiao-container{
		width: 100%;
	}
	.xiao-register-box{
		position: relative;
		height: 800px;
		width: 800px;
		top: 50px;
		margin: 0 auto;
		z-index: 99999;
		background:#ffffff;
		border: 7px solid #ccc;
	}
	.xiao-title-box{
		position: absolute;
		width: 300px;
		height: 50px;
		margin-left: 250px;
		margin-top: 5px;
		text-align: center;
		font-size: 28px;
		font-weight: 800;
		color: #ff5000;
		line-height: 50px;
	}
	.xiao-username-box{
		position: absolute;
		width: 500px;
		height: 40px;
		line-height: 40px;
		margin-top:100px;
		margin-left:80px;
		font-weight: 700;
	}
	.xiao-username-input{
		display: inline-block;
		margin-left: 28px;
		/*background: green;*/
	}
	#username{
		height: 35px;
		width: 290px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
	.xiao-userPassword-box{
		position: absolute;
		width: 500px;
		height: 40px;
		line-height: 40px;
		margin-top:180px;
		margin-left:80px;
		font-weight: 700;
	}
	.xiao-userPassword-input{
		display: inline-block;
		margin-left: 28px;
	}
	#userPassword{
		height: 35px;
		width: 290px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
	.xiao-userRePassword-box{
		position: absolute;
		width: 465px;
		height: 40px;
		line-height: 40px;
		margin-top:260px;
		margin-left:80px;
		font-weight: 700;
	}
	.xiao-userRePassword-input{
		display: inline-block;
		margin-left: 240px;
	}
	#userRePassword{
		height: 35px;
		width: 290px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
	.xiao-userPhone-box{
		position: absolute;
		width: 465px;
		height: 40px;
		line-height: 40px;
		margin-top:350px;
		margin-left:100px;
		font-weight: 700;
	}
	.xiao-userPhone-input{
		display: inline-block;
		margin-left: 28px;
	}
	#userPhone{
		height: 35px;
		width: 290px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
	.xiao-userEmail-box{
		position: absolute;
		width: 420px;
		height: 40px;
		line-height: 40px;
		margin-top:420px;
		margin-left:80px;
		font-weight: 700;
	}
	.xiao-userEmail-input{
		display: inline-block;
		margin-left: 28px;
	}
	#userEmail{
		height: 35px;
		width: 290px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
 
	.xiao-userGender-box{
		position: absolute;
		width: 420px;
		height: 40px;
		line-height: 40px;
		margin-top:320px;
		margin-left:330px;
		font-weight: 700;
	}
	.xiao-userGender-input{
		display: inline-block;
		margin-left: 62px;
	}
	.xiao-require{
		color: red;
	}
	.xiao-submit-box{
		position:absolute;
		width: 80px;
		height: 40px;
		line-height: 40px;
		margin-top: 580px;
		margin-left:100px;
		border-radius: 5px;
		background: grey;
	}
	#xiao-submit-button{
		display: inline-block;
		width: 80px;
		height: 40px;
		border-radius: 5px;
		background: #b3d9d9;
	}
	.xiao-reset-box{
		position:absolute;
		width: 80px;
		height: 40px;
		line-height: 40px;
		margin-top: 580px;
		margin-left:200px;
		border-radius: 5px;
		background: grey;
	}
	#xiao-reset-button{
		display: inline-block;
		width: 80px;
		height: 40px;
		border-radius: 5px;
		background: #b3d9d9;
	}
	.xiao-goLogin-box{
		position:absolute;
		width: 150px;
		height: 20px;
		margin-top: 370px;
		margin-left:300px;
 
	}
 
	</style>
</head>
<body>
    <div class="xiao-container">
		<div class="xiao-register-box">
			<div class="xiao-title-box">
				<img src="{% static 'pictures/bg.png' %}" width="300px" height="200px" alt="登录" />
			</div>
			<form action="http://127.0.0.1:8000//" method="post">
				<div class="xiao-username-box">
					<span class="xiao-require">*</span>
					<label for="username">手机号</label>
					<div class="xiao-username-input">
    					<select id="selectphone">
                            <option value="+86 ">+86 </option>
                            <option value="+885">+885</option>
                            <option value="+832">+832</option>
                            <option value="+835">+835</option>
                        </select>
						<input type="text" id="username" name="username" placeholder="请输入您的手机号" />
					</div>
				</div>
 
				<div class="xiao-userPassword-box">
					<span class="xiao-require">*</span>
					<label for="userPassword">验证码</label>
					<div class="xiao-userPassword-input">
						<input type="text" id="userPassword" name="userPassword" placeholder="请输入验证码" />
						<input type="button" value="发送验证码" id="encode" />
					</div>
				</div>
             
             <div class="xiao-userRePassword-box">
					<div class="xiao-userRePassword-input">
						<input id = "xiao-submit-button" type="submit" value="登录">
					</div>
				</div>
             
              <div class="xiao-userGender-box">
    				<a href="http://127.0.0.1:8000/login/">密码登录</a>
				</div>
				<div class="xiao-goLogin-box">
					<a href="http://127.0.0.1:8000/registered/" style="text-decoration: none;">没有账号？去注册</a>
				</div>
			</form>
		</div>
	</div>
</body>
</html>